<template>
  <div class="el-main">
    <el-main class="el-main">
      <el-row>
        <el-col :span="1">
          <el-button type="primary" @click="toAdd()">  <i class="el-icon-circle-plus-outline"></i>新建</el-button>
        </el-col>
      </el-row>
      <el-row style="padding-top: 10px">
        <el-col :span="24">
          <el-row>
            <el-col>
              <el-table class="el-tab" :data="tableData" border size="mini" style="font-size: 13px"
                        :cell-style="{height:'34px',padding:'0px'}"
                        :header-cell-style="{background:'#f5f6fa',fontWeight:'normal'}">
                <!--    <el-table-column prop="id" label="id" align="center">
                    </el-table-column>-->
                <el-table-column type="index" label="序号" align="center">
                </el-table-column>
                <el-table-column prop="title" label="标题"  align="center">
                </el-table-column>
                <el-table-column prop="createdBy" label="发布人"  align="center">
                </el-table-column>
                <el-table-column prop="createdDate" label="创建时间" :formatter="dateFormat" align="center">
                </el-table-column>
                <!--  <el-table-column prop="createdDate" label="发布时间" :formatter="dateFormat" align="center">
                  </el-table-column>-->
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="200" align="center">
                  <template slot-scope="scope">
                   <!-- <el-button  type="text" size="small">编辑</el-button>-->
                    <el-button @click.native.prevent="deleteRow(scope.row.id)" type="text" size="small">删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div class="block">
        <el-pagination align="right" style="margin-top: 5px;" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :current-page="pageable.page+1"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageable.size" layout="total, sizes, prev, pager, next, jumper"
                       :total="totalElements">
        </el-pagination>
      </div>
    </el-main>
  </div>
</template>

<script>
  import Qs from 'qs';
  import moment from 'moment'
  import {MessageBox, Message} from 'element-ui';

  export default {
    name: "index",
    data() {
      return {
        //总结点id
        parentId: 0,
        type: '1',
        tableData: [],
        totalElements: 0,
        content: '',
        pageable: {
          page: 0,
          size: 10,
          sort: 'id',
          type: "1"
        },
        menuTree: [],
        clickNode: false,
      }
    },
    created() {
      this.findByParam()
      //  this.findByParam()
    },
    watch: {
      'pageable.page': function (val) {
        this.findByParam()
      },
      'pageable.size': function (val) {
        this.findByParam()
      },
      'pageable.type': function (val) {
        this.findByParam()
      }
    },
    filters: {
      isKeyDepartment: function (val) {

        if (val === 1) {
          return "是"
        } else {
          return "否"
        }
      },
    },
    methods: {

      handleNodeClick: function (node) {

        this.totalElements = node.children.length;
        this.tableData = node.children;
        this.departmentId = node.id;
        this.parentId = node.id;
      },

      handleSizeChange(val) {
        this.pageable.size = val;
      },

      handleCurrentChange(val) {
        this.pageable.page = val - 1;
      },

      findByParam() {
        let that = this;
        let data = Qs.stringify(this.pageable)
        this.instance.post('/w/videos/s', data)
          .then(function (response) {
            that.totalElements = response.pageable.totalElements;
            that.tableData = response.data;
          })
          .catch(function (error) {
          });
      },


      deleteRow(id) {
        let that = this;
        let confirm = MessageBox.confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.instance.delete('/w/videos/' + id).then(function (response) {
            Message.success("删除成功")
            that.findByParam()
          })
        }).catch(() => {
          Message.info("取消删除")
        })
      },
      handleClick(row) {

      },
      edit(row) {
        this.$router.push({name: 'videoAdd', query: {department: row}}) // 只能用 name
      },
      toAdd() {
        this.$router.push({name: 'videoAdd'}) // 只能用 name
      },
      dateFormat: function (row, column) {
        let date = row[column.property];
        if (date === undefined) {
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },

    }
  }
</script>

<style scoped>

</style>
